<template>
<div>
    <!--header-->
  <div class="pt-header">
    <h1 class="header-logo"><a href="/" title="猴趣乐">LOGO</a> </h1>  
  </div>
  <div class="filter">
  	<x-input :placeholder="$t('输入你的推荐码')" v-model="inv"></x-input>
  	<x-button type="primary" @click.native="invitdata" >确定</x-button>

  </div>
   <div class="panel">
   	<p>你的布道人：****</p>
   </div>
  <div class="panel">     
      <p class="invit" v-clipboard="1111111" @success="isCopy(1)" @error="isCopy(0)">{{ $t('我的推荐码') }}：1111111</p>
   </div>
   <div class="panel">
        <h4>我的布道人</h4>
    </div>
    <x-table :cell-bordered="false" :content-bordered="false" class="rank">
       <thead>
          <tr>
            <th :class="" v-for="(item,index) in userTitle" :key="index">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in userRankList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            
            
          </tr>
        </tbody>
    </x-table>
</div>
</template>
<script>
 import {
 	XTable,
    Group,
    XInput,
    XButton,
    Box
  } from 'vux'
import lottery from './common/lottery.vue'
   export default {
   	components: {
   	  XTable,
      Group,
      XInput,
      lottery,
      XButton,
      Box
    },
   	data() {
      return {
      	inv:'',
        userTitle: [{
            name: '#',
            value: 0
          },
          {
            name: '昵称',
            value: 0
          },
          
          
        ],
        userRankList: [{
        	name:'小红'
        },{
        	name:'小明'
        } ]
        }
        },

    mounted() {
    	
    },

    methods: {
    
    invitdata() {
        	
          this.$http.post(`/users/bindfromcode`, {
            code: this.inv
           
          }).then((res) => {
          if(!this.inv){
          this.$vux.alert.show({
        		title: '提示',
                content: '输入你的推荐码'})
        	};
            // 新用户
            if (res.code == 200) {
              this.$vux.alert.show({
                title: '提示',
                content: '绑定成功'
              })
            } else {
              this.$vux.alert.show({
                title: '提示',
                content: res.msg
              })
              
            }
          }).catch(function(error) {});
        
      },
    }

    }

</script>
<style>
  .pt-header {
  min-height: 44px;
  height: 44px; 
  line-height: 40px;  
  position: relative; 
  background-color: #fff; 
  overflow: hidden; 
  }
  .header-logo { position: absolute; left: 1rem; bottom: .7rem; background-size: 180px 180px; background-position: 0 -142px; height: 28px; width: 260px;}
  .header-logo a { 
  display: inline-block; 
  background-size: 16rem 16rem;
  background-position: 0 -7.6rem;
  height: 100%; 
  width: 17rem; 
  text-indent: -9999px;
  background: url(/static/logo1.png) no-repeat; 
  }
  .vux-x-input.weui-cell{
    padding: 10px;
    height: 50px;
    border: 1px solid #d8d3d3;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
  }

</style>